<template>
	<view class="layout">
		<uni-popup ref="introRef" type="center" @maskClick="closePop">
			<view class="pic">
				<image class="img" src="@/static/images/upward.png" mode="heightFix" @click="closePop"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		watchEffect,
		ref
	} from 'vue';
	import {
		CacheKey
	} from '../../common/constants/constants';
	const introRef = ref(null)
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		}
	})
	const emits = defineEmits(['close'])
	const introduced = uni.getStorageSync(CacheKey.INTRO) || false
	watchEffect(() => {

		if (!introduced) {
			if (props.show) {
				introRef.value?.open()
			} else {
				introRef.value?.close()
			}
		}
	})

	const closePop = () => {
		emits('close')
	}
</script>

<style lang="scss" scoped>
	.layout {
		.pic {
			padding-top: 15vh;

			.img {
				height: 150rpx;
				transform: translateY(100rpx);
				animation: introAnimate 1.5s infinite;
			}
		}
	}

	@keyframes introAnimate {
		0% {
			transform: translateY(100rpx);
			opacity: 0;
		}

		100% {
			transform: translateY(-100rpx);
			opacity: 1;
		}
	}
</style>